<!DOCTYPE html>
<html lang="en">
   <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <link rel="stylesheet" type="text/css" href="../css/header.css" />
        <link rel="stylesheet" type="text/css" href="../css/myOders.css" />

        <script type="text/javascript" src="../js/flexible.debug.js"></script>

        <script type="text/javascript" src="../js/flexible_css.debug.js"></script>

    </head>
    <body>
        <header class="header">
            <span class="span  return"><img src="../img/fanhui.png" class='return' /></span>
            <span class="span">我的订单</span>
            <span class="span"></span>
        </header>


        <figure>
        <nav>
            <ul>
                <li>
                    <img src="../img/nav.png" height="48" width="51" alt="" />
                    <span>全部</span>
                </li>

                 <li>
                    <img src="../img/dai.png" height="48" width="46" alt="" />
                    <span>代付款</span>
                </li>

                 <li>
                    <img src="../img/3.png" height="48" width="51" alt="" />
                    <span>代发货</span>
                </li>

                 <li>
                    <img src="../img/10.png" height="48" width="51" alt="" />
                    <span>待收货</span>
                </li>
            </ul>
        </nav>
        </figure>


        <!-- 第一个       -->
        <section >
        <article class = '_article'>
            <!--<div class="shangpin">
                <dl>
                    <dt><img src="../img/dingdan1.png" height="255" width="347" alt="" /></dt>
                    <dd>
                        <h3>Basic House 秋冬宽松版型拼接撞色羊毛翻领外套</h3>
                        <p class="yanse">颜色分类：深灰色</p>
                        <p class="jiage"><span>￥1280</span><span>X1</span></p>
                    </dd>
                    <dd></dd>
                </dl>

                <div class="but">
                    <button class="lianxi">联系卖家</button>
                    <button class="quxiao">取消订单</button>
                    <button class="right">付款</button>
                </div>
            </div>-->

        </article>

            <article class="_article_one">
            <!--<div class="shangpin">
                <dl>
                    <dt><img src="../img/digndan2.png" height="255" width="347" alt="" /></dt>
                    <dd>
                        <h3>[saronala]2015新款秋冬宽松韩版雪纺打底衫针织衫</h3>
                        <p class="yanse">颜色分类：深灰色</p>
                        <p class="jiage"><span>￥265</span><span>X1</span></p>
                    </dd>
                    <dd></dd>
                </dl>

                <div class="but">
                    <button class="chakan">查看物流</button>
                    <button class="right">提醒发货</button>
                </div>
            </div>-->

        </article>



        <article class="_article_two">
            <!--<div class="shangpin">
                <dl>
                    <dt><img src="../img/dingdan3.png" height="255" width="347" alt="" /></dt>
                    <dd>
                        <h3>2015秋装新款棒球服女印花开衫薄款春秋休闲夹克衫</h3>
                        <p class="yanse">颜色分类：深灰色</p>
                        <p class="jiage"><span>￥168</span><span>X1</span></p>
                    </dd>
                    <dd></dd>
                </dl>

                <div class="but">
                    <button class="chakan">查看物流</button>
                    <button class="right">确认收货</button>
                </div>
            </div>-->

        </article>

        </section>


        <!-- 第二个 -->
        <section>
        <article class = "article_two">
            <!--<div class="shangpin">
               <p><img src="../img/img/taobao.png" height="120" width="78" alt="" /></p>
               <p>您还没有相关订单</p>
            </div>-->
            
             <!--<div class="shangpin">
                <dl>
                    <dt><img src="../img/dingdan1.png" height="255" width="347" alt="" /></dt>
                    <dd>
                        <h3>Basic House 秋冬宽松版型拼接撞色羊毛翻领外套</h3>
                        <p class="yanse">颜色分类：深灰色</p>
                        <p class="jiage"><span>￥1280</span><span>X1</span></p>
                    </dd>
                    <dd></dd>
                </dl>

                <div class="but">
                    <button class="lianxi">联系卖家</button>
                    <button>取消订单</button>
                    <button class="right">付款</button>
                </div>
            </div>-->

        </article>
        </section>






        <!-- 第三个 -->
        <section>
        <article class = "article_three">
            <!--<div class="shangpin">
                 <div class="shangpin">
               <p>　　<img src="../img/img/taobao.png" height="120" width="78" alt="" /></p>
               <p>您还没有相关订单</p>
            </div>
            </div>-->
            
            
             <!--<div class="shangpin">
                <dl>
                    <dt><img src="../img/digndan2.png" height="255" width="347" alt="" /></dt>
                    <dd>
                        <h3>[saronala]2015新款秋冬宽松韩版雪纺打底衫针织衫</h3>
                        <p class="yanse">颜色分类：深灰色</p>
                        <p class="jiage"><span>￥265</span><span>X1</span></p>
                    </dd>
                    <dd></dd>
                </dl>

                <div class="but">
                    <button class="chakan">查看物流</button>
                    <button class="right">提醒发货</button>
                </div>
            </div>-->

        </article>
    </section>









            <!-- 第四个 -->
        <section>
        <article  class = "article_for">
            <!--<div class="shangpin">
                <div class="shangpin">
               <p>　　<img src="../img/img/taobao.png" height="120" width="78" alt="" /></p>
               <p>您还没有相关订单</p>
            </div>
            </div>-->
            
            
            <!--<div class="shangpin">
                <dl>
                    <dt><img src="../img/dingdan3.png" height="255" width="347" alt="" /></dt>
                    <dd>
                        <h3>2015秋装新款棒球服女印花开衫薄款春秋休闲夹克衫</h3>
                        <p class="yanse">颜色分类：深灰色</p>
                        <p class="jiage"><span>￥168</span><span>X1</span></p>
                    </dd>
                    <dd></dd>
                </dl>

                <div class="but">
                    <button class="chakan">查看物流</button>
                    <button class="right">确认收货</button>
                </div>
            </div>-->
        </article>

        


        </section>








        <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
        <script src="../js/artTemplate.js"></script>
        
        
        <script type="text/javascript">
            $(function(){
                $('nav li:first, section:first').addClass('curr').siblings().removeClass('curr');
                $('nav li').click(function(){
                    $(this).addClass('curr').siblings().removeClass('curr');
                    $("section").eq($(this).index()).addClass('curr').siblings().removeClass('curr');
                });
            
            
            
            
            $('._article,.article_two').on('click','.lianxi',function(){
            	
            		location.href="../html/messageConcent.html";
            	
            	 
            })
            
            
            $('._article,.article_two').on('click','.right',function(){
            	
            		location.href="../html/confirmOrder.html";
            	
            	 
            })
            
            $('._article_two').on('click','.chakan',function(){
            	
            		location.href="../html/logistics.html";
            	
            	 
            })
            
            
             $('._article_one,.article_three').on('click','.chakan',function(){
            	
            		alert('还没有发货哟 亲')
            	
            })
             
             
             $('._article_one,.article_three').on('click','.right',function(){
            	
            		alert('提醒成功')
            	
            })
            
            
             $('.article_for').on('click','.chakan',function(){
            	
            		location.href="../html/logistics.html";
            	
            	 
            })
             
             $('.return').click(function(){
             	location.href="../html/mine.html";
             })
             
             
              $('.article_for,._article_two').on('click','.right',function(){
            	
            	$(this).parent().parent().remove();
            	alert('收货成功');
            	
            	 
            })
              
              
              
              $('._article,.article_two').on('click','.quxiao',function(){
            	
            	$(this).parent().parent().remove();
            	
            	 
            })
             
             
             


        });
        
        

        </script>
        
        
        <!--第一个-->
		<script type="text/html" id="tr-temp"> 
		 	     
		    {{each list as v}}
		    <div class="shangpin">
                <dl>
                    <dt><img src="{{v.img}}"/></dt>
                    <dd>
                        <h3>{{v.biaoti}}</h3>
                        <p class="yanse">{{v.yanse}}</p>
                        <p class="jiage"><span>{{v.jiage}}</span><span>{{v.shuliang}}</span></p>
                    </dd>
                    <dd></dd>
                </dl>

                <div class="but">
                    <button class="lianxi">{{v.lianxi}}</button>
                    <button class="quxiao">{{v.quxiao}}</button>
                    <button class="right">{{v.fukuan}}</button>
                </div>
            </div>  
             
           {{/each}}
		</script>
		
		
        <script>
		
			 $(function(){
            
            
            var _url = '../json/myOders.json';
            $.get(_url,function(res){
				console.log(res)
				var str = '';
				 var str = template("tr-temp", {list:res});	 
				 console.log(str);
				$('._article,.article_two').html(str);
				
			});

            
         })
		</script>
		
		
		
		
		
		
		
		
		
		
		<!--第二个-->
		<script type="text/html" id="temp"> 
		 	     
		    {{each list as v}}
		    <div class="shangpin">
                <dl>
                    <dt><img src="{{v.img}}"/></dt>
                    <dd>
                        <h3>{{v.biaoti}}</h3>
                        <p class="yanse">{{v.yanse}}</p>
                        <p class="jiage"><span>{{v.jiage}}</span><span>{{v.shuliang}}</span></p>
                    </dd>
                    <dd></dd>
                </dl>

                <div class="but">
                    <button class="chakan">{{v.wuliu}}</button>
                    <button class="right">{{v.tixing}}</button>
                </div>
            </div>  
             
           {{/each}}
		</script>
		
		
        <script>
		
			 $(function(){
            
            
            var _url = '../json/myOders_one.json';
            $.get(_url,function(res){
				console.log(res)
				var str = '';
				 var str = template("temp", {list:res});	 
				 console.log(str);
				$('article').eq(1).html(str);
				$('.article_three').html(str);
			});

            
         })
		</script>
		
		
		
		
		
		
		
		
		
		<!--第三个-->
		<script type="text/html" id="tem"> 
		 	     
		    {{each list as v}}
		    <div class="shangpin">
                <dl>
                    <dt><img src="{{v.img}}"/></dt>
                    <dd>
                        <h3>{{v.biaoti}}</h3>
                        <p class="yanse">{{v.yanse}}</p>
                        <p class="jiage"><span>{{v.jiage}}</span><span>{{v.shuliang}}</span></p>
                    </dd>
                    <dd></dd>
                </dl>

                <div class="but">
                    <button class="chakan">{{v.wuliu}}</button>
                    <button class="right">{{v.queren}}</button>
                </div>
            </div>  
             
           {{/each}}
		</script>
		
		
        <script>
		
			 $(function(){
            
            
            var _url = '../json/myOders_two.json';
            $.get(_url,function(res){
				console.log(res)
				var str = '';
				 var str = template("tem", {list:res});	 
				 console.log(str);
				$('article').eq(2).html(str);
				$('.article_for').html(str);

			});

            
         })
		</script>

        
        
        
        
        
        
        
    </body>
</html>